<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css" media="all">
    <link rel="stylesheet" href="dist/css/bootstrap-theme.min.css" media="all">
    <style>
        body {
        }

        .body, .left, .mid, .right {
            height:400px;
            border:1px #000 solid;
        }
        .left {
           /* background-color:red;*/
        }

        .right {
            overflow:scroll;
            /* background-color:yellow;*/
        }

    </style>
</head>
<body>
    <div class="container body">
        <div class="row">
            <div class="left col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <p class="text-left">文本段落</p>
                <p class="text-right">文本段落</p>
                <p class="text-center">文本段落</p>
                <p class="text-justify">文本段落</p>
                <p class="text-nowarp">文本段落</p>
                <blockquote>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                </blockquote>

            </div>
            <div class="mid col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <h1>
                    h1 . Bootstrap <small>heading</small>
                </h1>
                <h2>
                    h2 . Bootstrap heading
                </h2>
                <h3>
                    h3 . Bootstrap heading
                </h3>
                <h4>
                    h4 . Bootstrap heading
                </h4>
                <h5>
                    h5 . Bootstrap heading
                </h5>
                <h6>
                    h6 . Bootstrap heading
                </h6>
            </div>
            <div class="right col-lg-3 col-md-3 col-sm-3 col-xs-12">
                kbd: <kbd>ctrl + f</kbd> <br />
                var: <var>int</var> <br />
                code:
                <code>
                    #include &lt;stdio.h&gt;

                    int main(void)
                    {
                        return 0;
                    }
                </code>

                <br />

                pre(保留换行 空格 缩进):
                <pre>
                #include &lt;stdio.h&gt;

                int main(void)
                {
                    return 0;
                }
                </pre>

                samp:
                <samp>
                #include &lt;stdio.h&gt;

                int main(void)
                {
                    return 0;
                }
                </samp>
                <br />
                <abbr title="PHP is HyperText Pre">PHP缩写</abbr>
                <br />
                <address>地址:深圳市福田区</address>
                <br />
                <bdo>定义文字方向</bdo>
                <br />
                <blockquote>定义长的引用</blockquote>
                <br />
                <q>定义短的引用语</q>
                <br />
                <cite> 定义引用、引证 </cite>
                <br />
                <dfn title="项目定义">定义一个定义项目</dfn>
            </div>
        </div>
    </div>

    <br />
    <div class="table-responsive">
    <table class="table table-bordered table-hover">
        <caption>table title</caption>
        <thead>
            <tr>
                <th>title1</th>
                <th>title2</th>
                <th>title3</th>
                <th>title4</th>
                <th>title5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>foot</td>
                <td>foot</td>
                <td>foot</td>
                <td>foot</td>
                <td>foot</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>00001</td>
                <td>00002</td>
                <td>00003</td>
                <td>00004</td>
                <td>00005</td>
            </tr>
            <tr>
                <td>00001</td>
                <td>00002</td>
                <td>00003</td>
                <td>00004</td>
                <td>00005</td>
            </tr>
            <tr>
                <td>00001</td>
                <td>00002</td>
                <td>00003</td>
                <td>00004</td>
                <td>00005</td>
            </tr>
        </tbody>
    </table>
    </div>

    <script src="jquery-3.1.1.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
